<template>
    <div>
        <div class="e-h-400" :id="id"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    props: {
        id: '',
        data: []
    },
    mounted() {
        var chartDom = document.getElementById(this.id);
        var myChart = echarts.init(chartDom);
        var option;

        //获取数据
        var xAxisdata = []
        var seriesdata1 = []
        var seriesdata2 = []
        this.data.forEach((item)=>{
            xAxisdata.push(item.payway)
            seriesdata1.push(item.inamount)
            seriesdata2.push(item.outamount)
        })

        option = {
            // title: {
            //     text: 'World Population'
            // },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            xAxis: {
                type: 'category',
                // data: ['微信支付', '建设银行', '支付宝', '现金', '农业银行', '中国银行']
                data: xAxisdata
            },
            series: [
                {
                    name: '收入(元)',
                    type: 'bar',
                    // data: [18203, 23489, 29034, 104970, 131744, 630230]
                    data: seriesdata1
                },
                {
                    name: '支出(元)',
                    type: 'bar',
                    // data: [19325, 23438, 31000, 121594, 134141, 681807]
                    data: seriesdata2
                }
            ]
        };

        option && myChart.setOption(option);

    }
}
</script>

<style lang="scss" scoped>

</style>